<template>
  <!-- v-container用于创建视点在中心的页面，而fluid属性可将其宽度拓展到充满容器 -->
  <div class="panel-wrapper">
    <v-layout column justify-center class="panel px-4">
      <v-flex md9>
        <v-layout row wrap>
          <v-flex md12>
            <v-text-field
              outline
              color="secondary"
              prepend-inner-icon="account_circle"
              label="Account"
              v-model="username"
              type="text"
              name="username"
              hide-details
            ></v-text-field>
          </v-flex>
          <v-flex md12 mt-3>
            <v-text-field
              outline
              color="secondary"
              prepend-inner-icon="lock"
              label="Password"
              v-model="password"
              type="password"
              name="password"
              hide-details
            ></v-text-field>
          </v-flex>
          <v-flex md12 text-xs-center mt-3>
            <v-btn @click="onLogin" round dark color="secondary" class="login-button">
              <span class="title">Login</span>
            </v-btn>
          </v-flex>

          <!-- <v-flex md12 text-xs-right>
            <span>Forget Password</span>
          </v-flex>-->
          <!-- <v-flex md12 text-xs-center>
            <span>No account?</span>
            <router-link to="register" tag="span" class="blue--text">Sign Up</router-link>
          </v-flex>-->
        </v-layout>
      </v-flex>
    </v-layout>
  </div>
</template>

<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import Cookie from 'js-cookie';
import { Login } from "@/api";
import { Action, Mutation, Getter, namespace } from 'vuex-class';
const userModule = namespace('userModule');

declare const $Vue: Vue;

@Component
export default class LoginClass extends Vue {

  @userModule.Action('saveLoginStateFN') saveLoginStateFN: any;
  @userModule.Action('saveUserInfoFN') saveUserInfoFN: any;


  private username: string = '';
  private password: string = '';
  private account: string = '';

  

  protected mounted() {
    // this.testData()
  }

  private testData() {
    this.username = '1234'
    this.password = '123456'
  }

  private async onLogin() {
    if (this.username === "") {
      return $Vue.$emit("snackbar", {
        message: "Please enter your account"
      });
    }
    if (this.password === "") {
      return $Vue.$emit("snackbar", {
        message: "Please enter your password"
      });
    }
    const params = {
      username: this.username,
      password: this.password,
      userType: 1,
    };

    const { data } = await Login.handleLogin.r(params);
    // 存储sessionId
    if (data.result === 0) {
      console.log('login', data);
      Cookie.set('p_userId', data.data.userVo.userId.toString());
      let userInfo = data.data;
      Cookie.set('p_token', userInfo.userVo.token, {
        expires: 1,
        path: 'user'
      });
      Cookie.set('p_username', userInfo.userVo.username, {
        expires: 1,
        path: 'user'
      });
      Cookie.set('p_userType', userInfo.userVo.userType.toString(), {
        expires: 1,
        path: 'user'
      });

      this.saveUserInfoFN(userInfo.userVo);
      this.saveLoginStateFN(true);

      this.$emit('hide');

      $Vue.$emit('refresh');

    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }

  }
}
</script>


<style lang="less" scoped>
.panel-wrapper {
  // flex-basis: 26%;
  width: 24rem;
}
.panel {
  width: 100%;
  height: 14rem;
  border-radius: 2rem;
  background-color: #ffffffcd;
  .login-title {
    line-height: 2rem;
  }
}

.login-button {
  width: 12rem;
  height: 3rem;
}
</style>

